<template>
  <div class="home">
    <Header />
    <div class="home-container">
      <p class="show-btn">Show graph</p>
      <ul class="today-data-box">
        <li>
          <div class="flex flex-between">
            <p>TODAY’S SALES</p>
            <svg-icon icon-class="downArrow" />
          </div>
          <span>{{ todayData.today_sales }}</span>
        </li>
        <li>
          <div class="flex">
            <svg-icon icon-class="earthIcon" style="font-size: 50px; color: #008678;" />
            <div style="height: 100%; display: flex; flex-direction: column; justify-content: space-between;">
              <p>MARKETPLACES</p>
              <div class="flex flex-between">
                <span>{{ todayData.marketplaces }}</span>
                <svg-icon icon-class="downArrow" />
              </div>
            </div>
          </div>
        </li>
        <li>
          <p>Open orders</p>
          <div class="flex flex-between">
            <span>{{ todayData.open_orders }}</span>
            <svg-icon icon-class="downArrow" />
          </div>
        </li>
        <li>
          <p>Buyer messages</p>
          <div class="flex flex-between">
            <span>{{ todayData.buyer_massages }}</span>
            <svg-icon icon-class="downArrow" />
          </div>
        </li>
        <li>
          <p>Buy Box Wins</p>
          <div class="flex flex-between">
            <span>{{ todayData.buy_box_wins || '--' }}</span>
            <svg-icon icon-class="downArrow" />
          </div>
        </li>
        <li>
          <p>Total Balance</p>
          <div class="flex flex-between">
            <span>{{ todayData.total_balance }}</span>
            <svg-icon icon-class="downArrow" />
          </div>
        </li>
        <li>
          <p>IPI</p>
          <div class="flex flex-between">
            <span>{{ todayData.ipi || '-' }}</span>
            <svg-icon icon-class="downArrow" />
          </div>
        </li>
        <li>
          <p>Global Promotions Sales</p>
          <div class="flex flex-between">
            <span>{{ todayData.gloabal_promotions_sales || '--' }}</span>
            <svg-icon icon-class="downArrow" />
          </div>
        </li>
        <!-- <li v-for="(item, i) in todayData" :key="i + 'dataitem'">
          <div v-if="item.label === 'MARKETPLACES'" class="flex">
            <svg-icon icon-class="earthIcon" style="font-size: 50px; color: #008678;" />
            <div style="height: 100%; display: flex; flex-direction: column; justify-content: space-between;">
              <p>{{ item.label }}</p>
              <span>{{ item.value }}</span>
            </div>
          </div>
          <template v-else>
            <p>{{ item.label }}</p>
            <span>{{ item.value }}</span>
          </template>
        </li> -->
      </ul>
    </div>
    <div class="flex flex-between home-tips">
      <p class="tips-info">We’ve updated the experience and would like to hear your thoughts.</p>
      <div class="flex switch-box">
        <a-switch
          v-model="value"
          active-color="#00a4b4">
        </a-switch>
        <p>New homepage</p>
      </div>
    </div>
    <ul class="card-list">
      <li>
        <h4>
          <p>Shipment performance</p>
          <svg-icon icon-class="more" />
        </h4>
        <div class="card-info">You have shipment problems to resolve</div>
        <div class="card-table">
          <div class="flex card-table-tr">
            <div class="card-table-td label">{{ todayData.stranded_inventory_1 }}</div>
            <div class="card-table-td card-table-info"><p>Outstanding shipment problems to resolve</p></div>
          </div>
          <div class="flex card-table-tr">
            <div class="card-table-td label">{{ todayData.stranded_inventory_2 }}</div>
            <div class="card-table-td card-table-info"><p>Total shipment problems last 120 days</p></div>
          </div>
        </div>
        <div class="card-head">View details</div>
      </li>
      <li>
        <h4>
          <p>Customer Experience</p>
          <svg-icon icon-class="more" />
        </h4>
        <div class="card-info">You have in-stock issues that require attention</div>
        <div class="customer-box">
          <p class="customer-value">{{ todayData.customer_experience }}</p>
          <p>You have products that are out of stock</p>
        </div>
        <div class="card-head">Manage In-Stock Issues</div>
      </li>
      <li>
        <h4>
          <p>Stranded Inventory</p>
          <svg-icon icon-class="more" />
        </h4>
        <div class="card-info">You have FBA inventory without active offers</div>
        <div class="card-table">
          <div class="flex card-table-tr">
            <div class="card-table-td label">{{ todayData.stranded_inventory_1 }}</div>
            <div class="card-table-td card-table-info"><p>Total units stranded</p></div>
          </div>
          <div class="flex card-table-tr">
            <div class="card-table-td label">{{ todayData.stranded_inventory_2 }}</div>
            <div class="card-table-td card-table-info"><p>Units stranded more than 15 days</p></div>
          </div>
        </div>
        <div class="card-head">Fix Stranded Inventory</div>
      </li>
      <li>
        <h4>
          <p>Brand Referral Bonus</p>
          <svg-icon icon-class="more" />
        </h4>
        <div class="card-info">Start earning an average 10% bonus now.</div>
        <div class="card-img"><img src="@/assets/images/home/product_4.png" /></div>
        <div class="flex-1"></div>
        <div class="card-head">Enroll now</div>
      </li>
      <li>
        <h4>
          <p>News</p>
          <svg-icon icon-class="more" />
        </h4>
        <div v-for="(item, i) in cardNews" :key="i + 'newsitem'" class="card-item">
          <span>{{ item.time }}</span>
          <p>{{ item.info }}</p>
          <div class="read-mord">Read more ></div>
        </div>
      </li>
      <li>
        <h4>
          <p>New Selection Recommendations</p>
          <svg-icon icon-class="more" />
        </h4>
        <div class="card-info">Start selling high demand selection</div>
        <div class="card-table">
          <div class="flex card-table-tr">
            <div class="card-table-td label">{{ todayData.new_selection_recommendations_1 }}</div>
            <div class="card-table-td card-table-info"><p>High demand product recommendations curated for you</p></div>
          </div>
          <div class="flex card-table-tr">
            <div class="card-table-td label">{{ todayData.new_selection_recommendations_2 }}</div>
            <div class="card-table-td card-table-info"><p>Categories with insights into top customer preferred features</p></div>
          </div>
        </div>
        <div class="card-head">View Recommendations</div>
      </li>
      <li>
        <h4>
          <p>Tutorials and Training</p>
          <svg-icon icon-class="more" />
        </h4>
        <div class="card-info">Learn how to sell on Amazon</div>
        <div class="card-img"><img src="@/assets/images/home/product_2.png" /></div>
        <div class="flex-1"></div>
        <div class="card-head">Visit Seller University</div>
      </li>
      <li>
        <h4>
          <p>List globally</p>
          <svg-icon icon-class="more" />
        </h4>
        <div class="card-info">Get help reaching millions of customers by listing internationally.</div>
        <div class="card-img"><img src="@/assets/images/home/product_3.png" /></div>
        <div class="flex-1"></div>
        <div class="card-head">Manage international listings</div>
      </li>
      <li>
        <h4>
          <p>Seller Poll</p>
          <svg-icon icon-class="more" />
        </h4>
        <div class="seller-content">
          <div class="seller-info">I mainly hear positive stories from other sellers about their experience selling in Amazon's store</div>
          <div class="seller-selectbox">
            <div class="seller-item">
              <span></span>
              <p>Strongly Agree</p>
            </div>
            <div class="seller-item">
              <span></span>
              <p>Agree</p>
            </div>
            <div class="seller-item">
              <span></span>
              <p>Neither Agree nor Disagree</p>
            </div>
            <div class="seller-item">
              <span></span>
              <p>Disagree</p>
            </div>
            <div class="seller-item">
              <span></span>
              <p>Strongly Disagree</p>
            </div>
          </div>
        </div>
        <div class="flex-1"></div>
        <div class="card-head" style="background-color: rgb(117, 117, 117); cursor: not-allowed;">Submit</div>
      </li>
      <li>
        <h4>
          <p>Seller Forums</p>
          <svg-icon icon-class="more" />
        </h4>
        <div v-for="(item, i) in sellForums" :key="i + 'sellitem'" class="card-item">
          <span>{{ item.time }}</span>
          <p>{{ item.info }}</p>
          <div class="read-mord">Read more ></div>
        </div>
      </li>
    </ul>
    <Footer />
    <div class="home-foot-box">
      <ul class="footer-navs">
        <li>
          <h5>Catalog</h5>
          <p>Add Products</p>
          <p>Add Products via Upload</p>
          <p>Complete Your Drafts</p>
          <p>View Selling Applications</p>
          <p>Improve listing quality</p>
          <p>Upload images</p>
          <p>Upload and Manage Videos</p>
          <p>Manage Product Documents</p>
        </li>
        <li>
          <h5>Inventory</h5>
          <p>Manage All Inventory</p>
          <p>Manage Seller Fulfilled products</p>
          <p>Sell Globally</p>
          <p>Fulfilment by Amazon (FBA)</p>
          <p>Manage FBA Inventory</p>
          <p>Inventory Planning</p>
          <p>Manage FBA Shipments</p>
        </li>
        <li>
          <h5>Pricing</h5>
          <p>Pricing Health</p>
          <p>Manage Pricing</p>
          <p>Automate Pricing</p>
          <p>Fee Discounts</p>
        </li>
        <li>
          <h5>Orders</h5>
          <p>Manage Orders</p>
          <p>Create MCF Order</p>
          <p>Order Reports</p>
          <p>Upload Order Related Files</p>
          <p>Manage Returns</p>
        </li>
        <li>
          <h5>Advertising</h5>
          <p>Campaign Manager</p>
          <p>A+ Content Manager</p>
          <p>Vine</p>
          <p>Deals</p>
          <p>Coupons</p>
          <p>Prime Exclusive Discounts</p>
          <p>Promotions</p>
        </li>
        <li>
          <h5>Stores</h5>
          <p>Manage Stores</p>
        </li>
        <li>
          <h5>Growth</h5>
          <p>Growth Opportunities</p>
          <p>Explore Programs</p>
          <p>Custom program</p>
          <p>Marketplace Product Guidance</p>
        </li>
        <li>
          <h5>Reports</h5>
          <p>Payments</p>
          <p>Amazon Selling Coach</p>
          <p>Business Reports</p>
          <p>Fulfillment</p>
          <p>Return Reports</p>
          <p>Custom Reports</p>
          <p>Inventory Reports</p>
          <p>Tax Document Library</p>
        </li>
        <li>
          <h5>Performance</h5>
          <p>Account Health</p>
          <p>Feedback</p>
          <p>A-to-z Guarantee Claims</p>
          <p>Chargeback Claims</p>
          <p>Performance Notifications</p>
          <p>Voice of the Customer</p>
        </li>
        <li>
          <h5>Apps and Services</h5>
          <p>Selling Partner Appstore</p>
          <p>Manage Your Apps</p>
          <p>Explore Services</p>
          <p>Manage service requests</p>
          <p>Develop Apps</p>
        </li>
        <li>
          <h5>B2B</h5>
          <p>B2B Central</p>
          <p>Manage quotes</p>
          <p>Case Pack Recommendations</p>
        </li>
        <li>
          <h5>Brands</h5>
          <p>Build Your Brand</p>
        </li>
        <li>
          <h5>Learn</h5>
          <p>Seller University</p>
          <p>Forums</p>
          <p>News</p>
        </li>
        <li>
          <h5>Other Amazon Links</h5>
          <p>Amazon.ca Home Page</p>
          <p>Your Trade-In Account</p>
          <p>Kindle Direct Publishing</p>
          <p>Amazon Associates</p>
          <p>Your buyer account</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import { getHomeInfo } from '@/api'

export default {
  name: 'Home',
  components: {
    Header,
    Footer
  },
  data () {
    return {
      value: false,
      todayData: {},
      cardNews: [],
      sellForums: []
    }
  },
  created () {
    getHomeInfo().then(res => {
      this.todayData = res
      this.cardNews = [
        {
          time: res.news_1 && res.news_1.split('\n')[0],
          info: res.news_1 && res.news_1.split('\n')[1]
        },
        {
          time: res.news_2 && res.news_2.split('\n')[0],
          info: res.news_2 && res.news_2.split('\n')[1]
        },
        {
          time: res.news_3 && res.news_3.split('\n')[0],
          info: res.news_3 && res.news_3.split('\n')[1]
        }
      ]
      this.sellForums = [
        {
          time: res.seller_forums_1 && res.seller_forums_1.split('\n')[0],
          info: res.seller_forums_1 && res.seller_forums_1.split('\n')[1]
        },
        {
          time: res.seller_forums_2 && res.seller_forums_2.split('\n')[0],
          info: res.seller_forums_2 && res.seller_forums_2.split('\n')[1]
        },
        {
          time: res.seller_forums_3 && res.seller_forums_3.split('\n')[0],
          info: res.seller_forums_3 && res.seller_forums_3.split('\n')[1]
        }
      ]
    })
  }
}
</script>

<style lang="less" scoped>
.home{
  .home-container {
    padding: 0 17px;
  }
  .show-btn {
    font-size: 10px;
    color: rgb(0, 134, 120);
    line-height: 18px;
    cursor: pointer;
  }
  .today-data-box {
    display: flex;
    flex-wrap: wrap;
    margin-top: -5px;
    margin-bottom: 13px;
    li {
      min-width: 165px;
      height: 67px;
      padding: 8px;
      margin: 7px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background-color: #fff;
      border: 1px solid #ced1d2;
      cursor: pointer;
      p {
        font-size: 12px;
        color: #000;
        line-height: 15px;
        white-space: nowrap;
        text-transform: uppercase;
      }
      span {
        line-height: 23px;
        font-size: 19px;
        color: rgb(0, 134, 120);
      }
      .svg-icon {
        font-size: 20px;
      }
    }
  }
  .home-tips {
    height: 34px;
    padding: 5px 17px;
    background-color: rgba(133, 200, 214, 0.19);
    .tips-info {
      padding-left: 24px;
      color: #002f36;
    }
    .switch-box {
      /deep/button {
        min-width: 32px;
        height: 18px;
        background-color: #879596;
        &::after {
          top: 2px;
          left: 2px;
          width: 12px;
          height: 12px;
        }
      }
      p {
        padding-left: 8px;
        font-size: 12px;
        color: #667575;
      }
    }
  }
  .card-list {
    padding: 14px 17px 18px;
    margin-top: -10px;
    margin-bottom: 22px;
    margin-left: -10px;
    display: flex;
    flex-wrap: wrap;

    li {
      width: 280px;
      min-height: 290px;
      margin: 10px;
      display: flex;
      flex-direction: column;
      font-size: .8125rem;
      color: #002f36;
      line-height: 18px;
      border: 1px solid #979797;
      h4 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 15px;
        font-size: 20px;
        line-height: 1.4;
        p {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .card-info {
        padding: 10px 15px;
        line-height: 20px;
        background-color: rgb(227, 236, 237);
      }
      .card-head {
        line-height: 34px;
        text-align: center;
        color: #fff;
        letter-spacing: 0.003rem;
        border-radius: .1rem;
        background-color: rgb(0, 130, 150);
        cursor: pointer;
      }

      .card-table {
        margin-left: -1px;
        flex: 1;
        display: flex;
        flex-direction: column;
        .card-table-tr {
          flex: 1;
        }
        .card-table-td {
          height: 100%;
          padding: 0 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-left: 1px solid rgb(151, 151, 151);
          border-top: 1px solid rgb(151, 151, 151);
        }
        .label {
          width: 21.58%;
          max-width: 160px;
          font-size: 20px;
          line-height: .9;
        }
        .card-table-info {
          min-width: 130px;
          flex: 1;
          p {
            line-height: 18px;
          }
        }
      }

      .customer-box {
        padding-left: 15px;
        padding-right: 20px;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        align-items: center;
        justify-content: center;
        .customer-value {
          margin-bottom: 10px;
          font-size: 30px;
          font-weight: 600;
          line-height: 1.5;
        }
      }

      .seller-content {
        padding: 0 10px 5px 15px;
        .seller-info {
          margin-bottom: .5em;
        }
        .seller-item {
          height: 20px;
          margin-bottom: 5px;
          display: flex;
          align-items: center;
          span {
            width: 14px;
            height: 14px;
            border-radius: 10px;
            border: 1px solid #008296;
          }
          p {
            padding-left: 16px;
          }
        }
      }

      .card-item {
        padding: 5px 15px;
        span {
          font-size: 10px;
          color: rgb(155, 155, 155);
          line-height: 1.6;
          text-transform: uppercase;
        }
        p {
          height: 32px;
          font-size: 13px;
          font-weight: 600;
          line-height: 1.23077;
          letter-spacing: 0.07px;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .read-mord {
          color: #008296;
          cursor: pointer;
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
  .footer-navs {
    padding: 0 2.5% 40px;
  }
  .footer-navs {
    padding-top: 18px;
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #e7e7e7;
    li {
      width: 250px;
      margin-right: 14px;
      margin-bottom: 14px;
      h5 {
        font-size: 13px;
        font-weight: 600;
        color: #000;
        line-height: 29px;
      }
      p {
        font-size: .8rem;
        line-height: 19px;
        cursor: pointer;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
</style>
